<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户API测试页面</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
            color: #333;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        .container {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 10px;
        }
        button:hover {
            background-color: #2980b9;
        }
        .button-group {
            margin-bottom: 20px;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
            background-color: #f8f9fa;
            white-space: pre-wrap;
            word-wrap: break-word;
            max-height: 500px;
            overflow-y: auto;
            font-family: monospace;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
        }
        .info {
            background-color: #d1ecf1;
            color: #0c5460;
        }
    </style>
</head>
<body>
    <h1>用户API测试页面</h1>
    
    <div class="container">
        <h2>测试用户列表API</h2>
        <p>此页面用于测试修复后的用户列表API是否正常工作。点击下方按钮进行测试：</p>
        
        <div class="button-group">
            <button id="loginButton">登录获取Token</button>
            <button id="testApiButton">测试用户列表API</button>
            <button id="clearTokenButton">清除Token</button>
        </div>
        
        <div id="result" class="result info">点击按钮开始测试...</div>
    </div>
    
    <div class="container">
        <h3>测试说明</h3>
        <ul>
            <li>首先点击"登录获取Token"按钮，系统会使用默认管理员账号登录并获取Token</li>
            <li>然后点击"测试用户列表API"按钮，系统会尝试调用用户列表接口</li>
            <li>如果API调用成功，将会显示用户列表数据</li>
            <li>点击"清除Token"按钮可以清除存储的Token</li>
        </ul>
    </div>
    
    <script>
        const resultElement = document.getElementById('result');
        const loginButton = document.getElementById('loginButton');
        const testApiButton = document.getElementById('testApiButton');
        const clearTokenButton = document.getElementById('clearTokenButton');
        
        function showResult(message, type = 'info') {
            resultElement.textContent = message;
            resultElement.className = `result ${type}`;
        }
        
        function showLoading() {
            showResult('正在处理...', 'info');
        }
        
        loginButton.addEventListener('click', async () => {
            showLoading();
            
            try {
                const response = await fetch('/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username: 'admin',
                        password: 'admin123'
                    })
                });
                
                const data = await response.json();
                
                if (response.ok && data.code === 200 && data.data && data.data.token) {
                    localStorage.setItem('token', data.data.token);
                    localStorage.setItem('userInfo', JSON.stringify(data.data));
                    showResult(`登录成功！\nToken: ${data.data.token.substring(0, 30)}...\n\n用户信息: ${JSON.stringify(data.data, null, 2)}`, 'success');
                } else {
                    showResult(`登录失败！\n错误代码: ${data.code || '未知'}\n错误消息: ${data.message || '未知错误'}\n\n详细响应: ${JSON.stringify(data, null, 2)}`, 'error');
                }
            } catch (error) {
                showResult(`登录过程发生错误：\n${error.message}`, 'error');
            }
        });
        
        testApiButton.addEventListener('click', async () => {
            showLoading();
            
            const token = localStorage.getItem('token');
            
            if (!token) {
                showResult('请先登录获取Token！', 'error');
                return;
            }
            
            try {
                const response = await fetch('/api/system/users?page=1&pageSize=10', {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    }
                });
                
                const data = await response.json();
                
                if (response.ok && data.code === 200) {
                    showResult(`用户列表API调用成功！\n\n返回数据: ${JSON.stringify(data, null, 2)}`, 'success');
                } else {
                    showResult(`用户列表API调用失败！\n错误代码: ${data.code || '未知'}\n错误消息: ${data.message || '未知错误'}\n\n详细响应: ${JSON.stringify(data, null, 2)}`, 'error');
                }
            } catch (error) {
                showResult(`调用用户列表API过程发生错误：\n${error.message}`, 'error');
            }
        });
        
        clearTokenButton.addEventListener('click', () => {
            localStorage.removeItem('token');
            localStorage.removeItem('userInfo');
            showResult('已清除Token和用户信息', 'info');
        });
        
        // 页面加载时检查是否已有Token
        window.addEventListener('load', () => {
            const token = localStorage.getItem('token');
            if (token) {
                showResult('检测到已有Token，您可以直接点击"测试用户列表API"按钮进行测试。', 'info');
            } else {
                showResult('未检测到Token，请先点击"登录获取Token"按钮。', 'info');
            }
        });
    </script>
</body>
</html>